<template>
    <div class="outer">
        <h1>Movie</h1>
        <p>Count的数据是{{count}}</p>
        <button @click="setMovieList">获取电影排行</button>
        <ul>
            <li v-for="item in movieList" :key="(item as any).tvId">
                <h3>{{item.albumName}}</h3>
            </li>
        </ul>
    </div>
</template>
  
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Movie",
});
</script>
  
<script setup lang="ts">
import { storeToRefs } from "pinia";
import useCountStore from "../store/movie";
import useMovieStore from "../store/movie";
const countStore = useCountStore();
const movieStore = useMovieStore();

const { count } = storeToRefs(countStore);
const { movieList } = storeToRefs(movieStore)

const { setMovieList } = movieStore;
</script>
  
<style scoped>
.outer {
    background-color: skyblue;
}
</style>